<template>
    <div class="content-container container">
        <el-form :model="employeeForm" :rules="employeeRules" ref="employeeForm" label-width="100px">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="employeeForm.name" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item v-if="!employeeID" label="密码" prop="password">
                <el-input v-model="employeeForm.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item v-if="!employeeID" label="验证密码" prop="checkPass">
                <el-input v-model="employeeForm.checkPass" type="password" placeholder="再输入一遍密码"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="employeeForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="employeeForm.age"></el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="employeeForm.dept">
                    <el-option
                            v-for="department in departments"
                            :key="department.id"
                            :label="department.name"
                            :value="department.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="超级管理员">
                <el-switch
                        v-model="employeeForm.admin"
                ></el-switch>
            </el-form-item>
            <el-form-item label="分配角色" v-show="!employeeForm.admin">
                <el-transfer v-model="employeeForm.roles" :data="roles"></el-transfer>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveEmployee()">保存</el-button>
                <el-button type="danger" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {getDepartMentsApi, getRolesApi, addEmployeeApi, getEmployeeApi, updateEmployeeApi} from "@/request/api";

    export default {
        name: "AddEmployee",
        data() {
            return {
                departments: [],
                roles: [],
                employeeForm: {
                    name: '',
                    password: '',
                    checkPass: '',
                    email: '',
                    age: '',
                    admin: false, // 是否超级管理员
                    dept: 0,
                    roles: []
                },
                employeeRules: {
                    name: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 5, max: 20, message: '用户名长度必须大于5个', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 4, max: 6, message: '请输入一个长度介于4和6之间的字符串', trigger: 'blur'}
                    ],
                    checkPass: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 4, max: 6, message: '请输入一个长度介于4和6之间的字符串', trigger: 'blur'},
                        {validator: this.checkPwdVali, trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入电子邮箱', trigger: 'blur'},
                        {validator: this.emailVali, trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                        {validator: this.ageVali, trigger: 'blur'}
                    ]
                },
                employeeID: null
            }
        },
        methods: {
            checkPwdVali(rule, value, callback) {
                if (value === this.employeeForm.password) {
                    return callback()
                }
                callback('两次输入的密码不相同')
            },
            emailVali(rule, value, callback) {
                if (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g.test(value)) {
                    return callback()
                }
                callback('请输入正确的邮箱地址')

            },
            ageVali(rule, value, callback) {
                if (!Number.isInteger(value)) {
                    return callback()
                } else if (value < 18 || value > 65) {
                    return callback('请输入一个介于 18 和 65 之间的值')
                }
                callback('只能输入整数')
            },
            saveEmployee() {
                const paramsObj = {
                    name: this.employeeForm.name,
                    email: this.employeeForm.email,
                    age: this.employeeForm.age,
                    admin: this.employeeForm.admin,
                    dept: {id: this.employeeForm.dept},
                    ids: !this.employeeForm.admin ? this.employeeForm.roles : []
                }
                if (this.employeeID) {
                    updateEmployeeApi({
                        id: this.employeeID,
                        ...paramsObj
                    }).then(res => {
                        if (res.success) {
                            this.$message.success('更新员工信息成功!')
                            this.$router.replace({path: '/employee'})
                        }
                    })
                } else {
                    this.$refs['employeeForm'].validate(vali => {
                        if (vali) {
                            addEmployeeApi({
                                password: this.employeeForm.password,
                                ...paramsObj
                            }).then(res => {
                                if (res.success === true) {
                                    this.$message.success('添加员工信息成功!')
                                    this.$router.replace({path: '/employee'})
                                }
                            })
                        } else {
                            return false
                        }
                    })
                }
            },
            reset() {
                this.$refs['employeeForm'].resetFields();
            },

        },
        created() {
            this.employeeID = this.$route.params.eid || null
            // 获取当前员工的信息
            if (this.employeeID) {
                getEmployeeApi({id: this.employeeID}).then(res => {
                    if (res.success === true) {
                        this.employeeForm = res.data
                        this.employeeForm.dept = res.data.dept.id
                        this.employeeForm.roles = res.data.roles.map(role => role.id) || []
                    }
                })
            }

            // 部门管理列表
            getDepartMentsApi({
                currentPage: 1,
                pageSize: 1000
            }).then(res => {
                if (res.success === true) {
                    this.departments = res.data.list
                    if (!this.employeeID) {
                        this.employeeForm.dept = this.departments[0].id
                    }
                }
            })

            // 获取角色列表
            getRolesApi({
                currentPage: 1,
                pageSize: 1000
            }).then(res => {
                if (res.success === true) {
                    this.roles = res.data.list.map(dep => {
                        return {
                            key: dep.id,
                            label: dep.name
                        }
                    })
                }
            })
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    .el-form {
        margin-top: 20px;
        width: 700px;
    }
</style>